<template>
  <el-row :span="24">
    <el-col :span="8">
      <el-card class="box-card1">
        <div slot="header" class="box-card-tit">
          <span>头条新闻</span>
          <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
        </div>
        <!--轮播-->
        <el-carousel indicator-position="outside" height="205px">
          <el-carousel-item v-for="(item,index) in  datalist.slice(0,5)" :key="index">
            <img class="image" :src="item.image" />
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card class="box-card2">
        <div slot="header" class="box-card-tit">
          <span>通知公告</span>
          <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
        </div>
        <div class="box-card-ul" v-for="(item,ind) in datalist2" :key="ind">
          <div class="box-card-li">
            <div class="title">{{item.title}}</div>
            <div class="cen">
              <div class="name">{{item.name}}</div>
              <div class="time">{{item.time}}</div>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
  import {getStaticUserInfo} from '@/utils/user'

  export default {
    props: {
      indexData: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data() {
      return {
        str: 'dc_cw',
        userInfo: getStaticUserInfo(),
        datalist:[
          {
            image:require('@/assets/login_images/background.jpg'),
          },{
            image:require('@/assets/login_images/background.jpg'),
          },{
            image:require('@/assets/login_images/background.jpg'),
          }
        ],
        datalist2:[
          {
            title:'公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告',
            name:'流星',
            time:'2021-01-12 09:12'
          },{
            title:'公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告',
            name:'流星',
            time:'2021-01-12 09:12'
          },{
            title:'公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告',
            name:'流星',
            time:'2021-01-12 09:12'
          },{
            title:'公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告',
            name:'流星',
            time:'2021-01-12 09:12'
          },{
            title:'公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告',
            name:'流星',
            time:'2021-01-12 09:12'
          }
        ],
        info: {
          dns: {
            index: 1,
            href:'/paymentCheck',
            href2:'/dcPaymentCheck',
            url: require('@/assets/index_images/dns.png'),
            title: '待内审(项）',
          },
          dgdhd: {
            index: 2,
            href:'/activity',
            href2:'/project',
            url: require('@/assets/index_images/dgdhd.png'),
            title: '待归档活动(场）',
          },
          dgdxm: {
            index: 3,
            href:'',
            href2:'',
            url: require('@/assets/index_images/dgdxm.png'),
            title: '待归档项目(项）',
          },
          zhye: {
            index: 4,
            href:'',
            href2:'',
            url: require('@/assets/index_images/zhye.png'),
            title: '账户余额(元）',
          },
          dtj: {
            index: 5,
            href:'',
            href2:'',
            url: require('@/assets/index_images/dtj.png'),
            title: '待提交(元）',
          },
          bzjye: {
            index: 6,
            href:'',
            href2:'',
            url: require('@/assets/index_images/bzjye.png'),
            title: '保证金余额(元）',
          },
          nsbh: {
            index: 7,
            href:'/paymentPending',
            href2:'/dcPaymentPending',
            url: require('@/assets/index_images/nsbh.png'),
            title: '内审驳回(项）',
          },
          zsbh: {
            index: 9,
            href:'/paymentCheck',
            href2:'/dcPaymentCheck',
            url: require('@/assets/index_images/zsbh.png'),
            title: '总审驳回(项）',
          },
          fl: {
            index: 10,
            href:'',
            href2:'',
            url: require('@/assets/index_images/fl.png'),
            title: '费率',
          },
        },
        btnList: [],
        description:
          '共享经济下，产业链条内的灵活用工新模式。随充随付，资金一键秒到账，降低企业运营成本。',
      }
    },

    watch: {
      indexData: {
        deep: true,
        handler: function (newVal) {
          this.btnList = [];
          let key1 = Object.keys(newVal)
          let key2 = Object.keys(this.info)
          let val = key1.filter((re)=> key2.includes(re))
          console.log(key1)
          console.log(key2)
          console.log(val)
          let arr = []
          for (let key of val) {
            let a = {
              ...this.info[key],
              value: newVal[key]
            }
            if(this.userInfo.user_type == 1 && key == 'dgdxm') {
              a.title = this.info.dgdhd.title
              a.url = this.info.dgdhd.url
            }
            arr.push(a)
          }
          this.btnList = arr.sort((a, b) => a.index - b.index)
        }
      }
    },

    methods: {
      handlePage(row) {
        this.$router.push({ path: row })
      },
      handleTips() {
        const hour = new Date().getHours()
        return hour < 8
          ? `早上好 ${this.username}，又是元气满满的一天。`
          : hour <= 11
            ? `上午好 ${this.username}，看到你我好开心。`
            : hour <= 13
              ? `中午好 ${this.username}，忙碌了一上午，记得吃午饭哦。`
              : hour < 18
                ? `下午好 ${this.username}，你一定有些累了，喝杯咖啡提提神。`
                : `晚上好 ${this.username}，愿你天黑有灯，下雨有伞。`
      },
    },
  }
</script>

<style lang="scss" scoped>
.box-card-ul{
  display: flex;
  flex-direction: column;
  .box-card-li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 30px;
    padding: 7.5px 0;
    border-bottom: 1px solid #ebeef5;
    .title{
      width: 70%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cen{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 30%;
      .name{
        margin-right: 20px;
      }
    }
  }
  .box-card-li:last-of-type{
    border-bottom: 1px solid #ebeef5;
  }
}

.box-card1,.box-card2 {
  width: 100%;
  .box-card-tit{
    display: flex;
    justify-content:space-between;
    align-items: center;
  }
}
.box-card1{
  width: calc(100% - 20px) !important;
  margin-right: 20px!important;
  .image{
    width: 100%;
    height: 100%;
  }
}

</style>
